<template>
    <div :ref="echartsId || 'chart'" :key="echartsId" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'eChart',
    props: {
        echartsId: {
            type: String,
            required: false,
        },
        data: {
            type: Object,
            required: false,
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 获取元素
            const chartDom = this.$refs[this.echartsId || 'chart'];
            // 初始化ECharts实例
            const myChart = echarts.init(chartDom);
            // 配置项
            const option = this.data || {};
            // 使用配置项
            myChart.setOption(option);
        },
    },
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>